<template>
  <div>
    <div
      id="luckysheet"
      style="margin: 0px; padding: 0px; position: absolute; width: 100%; height: 90%; left: 0px; top: 10%">
    </div>
    <div style="font-size: 16px;position: absolute;left: 0px; top: 0px">
      <input
      style="font-size: 16px"
      type="file"
      @change="uploadExcel" />
      <button @click="printExcelData">打印数据结构</button>
      <button @click="downloadExcel">导出Excel表格</button>
    </div>
  </div>
</template>

<script>
  import LuckyExcel from 'luckyexcel'
  import { exportExcel } from './export'
  export default {
    name: 'HelloWorld',
    mounted() {
      // 钩子协同编辑
      // let ws = new WebSocket("")
      // ws.onmessage = function(message) {
      //   console.log('wsmessage', message)
      //   let data = JSON.parse(message)
      //   luckysheet.setCellValue(data.row,data.col,data.after.v,{
      //     isReactive: true,
      //     order:0  //设置哪一张表 默认是第一张sheet
      //   })
      // }
      // 设置单元格的值

      let nowsheet = "Sheet1"
      //配置项
      var options = {
        container: 'luckysheet', //luckysheet为容器id
        title: '测试表格', // 设定表格名称
        showinfobar: false, // 是否显示顶部信息栏
        lang: 'zh', // 设定表格语言
        // "row": 10, //行数
        // "column": 5, //列数
        hook: {
          // 监测到现在在哪一张表
          sheetActivate() {

          },
          // 判断这次和上次值是否一样  防止死循环更新设置值
          cellUpdateBefore(row,col,data){
            if(luckysheet.getCellValue(row,col) == data) {
              return false
            }
          },
          cellUpdated(row,col, before, after) {
            console.log('row,col, before, after', row,col, before, after);
            // ws.send(JSON.stringify({
            //   row: row,
            //   col: col,
            //   after: after,
            //   sheet: nowsheet,
            //   filename: filename
            // }))
          }
        }
      }
      luckysheet.create(options)
    },
    methods: {
      // 导出下载 excel 文件
      downloadExcel() {
        exportExcel(luckysheet.getAllSheets(), '下载')
      },
      uploadExcel(evt) {
        const files = evt.target.files
        if (files == null || files.length == 0) {
          alert('没有导入文件')
          return
        }

        let name = files[0].name
        let suffixArr = name.split('.'),
          suffix = suffixArr[suffixArr.length - 1]
        if (suffix != 'xlsx') {
          alert('只支持xlsx文件！！')
          return
        }
        LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
          console.log('files[0]=======', files[0],'exportJson========',exportJson, 'luckysheetfile============',luckysheetfile);
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            alert('Failed to read the content of the excel file, currently does not support xls files!')
            return
          }
          window.luckysheet.destroy()

          window.luckysheet.create({
            container: 'luckysheet', //luckysheet is the container id
            // showinfobar: false,
            lang: 'zh', // 设定表格语言
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator,
          })
        })
      },
      printExcelData() {
        let data = luckysheet.getAllSheets()
        console.log('表格数据~', data);
      }
    },
  }
</script>

<style lang="less" scoped>
.test {
  width: 200px;
  height: 200px;
  background-color: skyblue;
}
</style>
